<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Staff</title>
		<link href="resources/CSS/Selected.css" rel="stylesheet" type="text/css"/>
	</head>
	
	<script type='text/javascript'>
	
	    function toggle_visibility(id) {
	       var e = document.getElementById(id);
	       if(e.style.display == 'block')
	          e.style.display = 'none';
	       else
	          e.style.display = 'block';
	    }
	
	</script>
	
	<body>
	
	<div class='center'>
	
		<h1>John Smith</h1>
		
		<br />
		
		<table class='status'>
			<tr>
				<td>
					Status: Waiter  
				</td>
				<td>
					<button type='button' onClick="toggle_visibility('change')">Change Status</button>
				</td>
			</tr>
			
		</table>
		
		<br />
	
		<div id='change' style='display:none'>
			<table class='status'>
				<tr>
					<td>
						Change Status: 
					</td>
					<td>
						<select name='status' class='glass'>
							<option value=''></option>
							<option value='0'>Waiter</option>
							<option value='1'>Host</option>
							<option value='2'>Manager</option>		
						</select>
					</td>
				</tr>
			</table>
		</div>
		
		<br />
		<br />
		
		<h2>Schedule</h2>
		
		<hr>
		
		
		<table class='schedule'>
			<tr>
				<td class='days'>
					DAYS
				</td>
				
				<td>
					Clock In:
					clock_in_hr : clock_in_min    in_time
				</td>
				
				<td>
					Clock Out:
					clock_out_hr : clock_out_min    out_time
				</td>
			</tr>
		</table>
		
		
		<br />
		
		<table class='schedule' id='toggle' style='display:none'>
			<tr>
				<td class='days'>
					${current.value}
				</td>
				
				<td>
					Clock In:
					<input type="text" class="time" name="clock_in_hr" maxlength="2" size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/>
					:
					<input type="text" class="time" name="clock_in_min" maxlength="2" size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/>
					
					<select name='in_time'>
						<option value =''></option>
						<option value="am">AM</option>
						<option value="pm">PM</option>	
					</select>
				</td>
				
				<td>
					Clock Out:
					<input type="text" class="time" name="clock_out_hr" maxlength="2"  size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/>
					:
					<input type="text" class="time" name="clock_out_min" maxlength="2" size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/>
					
					<select name='out_time'>
						<option value =''></option>
						<option value="am">AM</option>
						<option value="pm">PM</option>	
					</select>
				</td>
			</tr>
		</table>
		
		<br />
		
		<button type='button' onClick="toggle_visibility('toggle')">Modify Schedule</button>
	
		<br />
		
		<div class='bottom'>
			<strong>Total receipts count: $ </strong>
		</div>
		
	</div>
	
	</body>
	
</html>


<div class='center'>

	<span>
		<b>Menu Name:</b> <input type='text' name='menuName' />
	</span>
	
	<br />

	<table>
		<tr>
			<td>
				<h1>Main Course:</h1>
				
				<hr />
				
				<table>
					<tr>
						<td>${entree.name}:</td> 
						<td> x </td>
						<td><input name='entree' type='text' size="3" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/></td>
					</tr>
				</table>
			</td>
		</tr>
			
		<tr>
			<td>
				<h1>Side Dishes:</h1>
				
				<hr />
				
				<table>
					<tr>
						<td>${side.name}:</td> 
						<td> x </td>
						<td><input name='side' type='text' size="3" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/></td>
					</tr>
				</table>
			</td>
		</tr>
		
		<tr>
			<td>
				<h1>Drinks:</h1>
				
				<hr />
				
				<table>
					<tr>
						<td>${drink.name}:</td> 
						<td> x </td>
						<td><input name='drink' type='text' size="3" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
		
	<br />
	<br />
	<br />
		
</div>
		